<template>
    <div 
       
        style="width: 100%;" 
        class="talbe_outer_wapper" 
        v-loading="gridIsLoading" 
        element-loading-text="拼命加载中" 
        element-loading-spinner="el-icon-loading" 
        element-loading-background="rgba(0,0,0,.2)">

        <!-- 没有设计 autoFill -->
        <el-table 
                    class="el-table-mem"
                    :data="data"                     
                    :emptyText="emptyText"
                    @selection-change="selectionChange"
                    ref="el-table-ref"
                    border
                    >
            <slot></slot>
        </el-table>



        <el-pagination 
            v-if="pageParam.totalSize > pageParam.pageSize"
            
            @current-change="handleCurrentChange" 
            :current-page="pageParam.currentPage" 
            :page-size="pageParam.pageSize" 
            :total="pageParam.totalSize"
            layout="total, prev, pager, next" 

            style="text-align: right; background-color: #fff; border: none;"
            >
        </el-pagination>

               
    </div>

</template>

<script>
export default {
    data() {
        return {

            gridIsLoading: false,


            pageParam:{
                totalSize: 0,          //总数据量
                currentPage: 1,        //当前第几页
                pageSize: 10           //每页多少条
            },

            totalData:[],
            data: [],
            emptyText: '  ',

            showTable: false,

            caculateTableHeight: -1
        };
    },
    created() {

        if(this.defaultPageSize > 0){
            this.pageParam.pageSize = this.defaultPageSize
        }
    },

    destroyed(){
        
    },
    computed: {

    },
    updated(){
      
    },
    methods: {

        selectionChange(val){
            this.$emit('selection-change', val)
        },
        getDataLengh(){
            if(this.data){
                return this.data.length;    
            }
            return 0;
        },
        getData(){
            return this.data;
        },


        sort(column, type){
            this.$refs['el-table-ref'].sort(column, type);
        },

        loadData(inputTotalData){


            this.totalData = inputTotalData;

            this.pageParam.totalSize = inputTotalData.length;
            this.pageParam.currentPage = 1;
            
            var tmpData = [];
            for(var i=0; i<this.pageParam.pageSize ;i++ ){
                if(this.totalData.length > i){
                    tmpData.push(this.totalData[i]);    
                }
            }


            this.data = tmpData;

        },
        
        handleCurrentChange(currentPageIndex) {
            this.pageParam.currentPage = currentPageIndex;

            var tmpData = [];
            for(var i=(currentPageIndex-1) * this.pageParam.pageSize; i< ((currentPageIndex) * this.pageParam.pageSize);i++ ){
                if(this.totalData.length > i){
                    tmpData.push(this.totalData[i]);    
                }
            }            

            this.data = tmpData;
        }
    },
    props: {

        defaultPageSize:{
            type: Number,
            default: 10
        },

        autoLoad:{
            type: Boolean,
            default: true
        },
        url: '',
        rowIndexField: {
            type: String,
            default: '_row_index_'
        },
        
        autoFill: {
            type: Boolean,
            default: false
        },

        //height:[String, Number], 
        height: [String, Number],

        size: String,
        width: [String, Number],
        
        maxHeight: [String, Number],
        fit: {
            type: Boolean,
            default: true
        },
        stripe: Boolean,
        border: Boolean,
        rowKey: [String, Function],
        context: {},
        showHeader: {
            type: Boolean,
            default: true
        },
        showSummary: Boolean,
        sumText: String,
        summaryMethod: Function,
        rowClassName: [String, Function],
        rowStyle: [Object, Function],
        cellClassName: [String, Function],
        cellStyle: [Object, Function],
        headerRowClassName: [String, Function],
        headerRowStyle: [Object, Function],
        headerCellClassName: [String, Function],
        headerCellStyle: [Object, Function],
        highlightCurrentRow: Boolean,
        currentRowKey: [String, Number],

        expandRowKeys: Array,
        defaultExpandAll: Boolean,
        defaultSort: Object,
        tooltipEffect: String,
        spanMethod: Function,
        selectOnIndeterminate: {
            type: Boolean,
            default: true
        }
    }
}

</script>

<style type="text/css">


.el-table-mem  thead th {
    background-color: #f0f0f0;
    color: #333;
    font-weight: 500;
    
}
.el-table-mem .cell{
    white-space: nowrap; text-overflow:ellipsis; overflow:hidden; 
}


</style>
